<template>
    <view class="order-list">
        <custom_navbar :title="navbar_title" theme="light" />
        <view class="order-tab-bar">
            <view class="tab-item" v-for="(item, index) in tabList" :key="index">
                <view
                    class="tab-title"
                    :class="[curTab == index ? 'tab-active' : '']"
                    @click="handleTab(index)"
                >
                    {{ item }}
                    <image
                        v-if="curTab == index"
                        class="tab-img"
                        :class="[curTab == '0' ? 'tab-img-all' : '']"
                        src="../../static/images/avatar_up.png"
                    />
                </view>
            </view>
        </view>
        <view class="list-box">
            <view v-if="orderList.length !== 0">
                <order_item v-for="(item, index) in orderList" :key="index" :info="item"></order_item>
            </view>
            <view v-else class="list-nodata">暂无数据</view>
        </view>
    </view>
</template>

<script setup>
import { navigateTo, navigateBack } from "@/hooks";
import { orderList } from "@/api/home.js";
import custom_navbar from "@/components/custom_navbar/index.vue";
import order_item from "@/components/order_item/index.vue";
import store from "@/store";

export default {
	components: { custom_navbar, order_item },
	data() {
		return {
			navigateTo,
            navbar_title: "我的订单",
            curTab: 0,
            curPage: 0,
            total: 0,
            tabList: ["全部", "待付款", "已完成", "已关闭"],
            payState: ['all', 'wait', 'paid', 'fail'],
            orderList: []
		}
	},
    onLoad(options) {
        if (options.type) {
            this.curTab = Number(options.type);
        }
        this.getOrderList();
	},
    onUnload() {
      store.commit("userInfo/set_is_login_popup", false);
    },
    onReachBottom() {
		this.loadMore();
	},
    methods: {
        handleTab(val) {
            this.curTab = val;
            this.curPage = 0;
            this.orderList = [];
            this.getOrderList();
        },
        loadMore() {
            let isLoad = Math.ceil(this.total / 10) > this.curPage;
            if (isLoad) {
                this.getOrderList();
            }
        },
        getOrderList() {
            let params = {
                page: this.curPage + 1,
                limit: 10,
                pay_state: this.payState[this.curTab]
            };
            orderList(params).then(res => {
                if (res.code == 200) {
                    this.curPage = params.page;
                    this.total = res.data.total;
                    let datas = [...this.orderList];
                    if (res.data.data.length > 0) {
                        datas.push(...res.data.data)
                    } else {
                        datas = [];
                    }
                    this.orderList = datas;
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.order-list {
    height: 100vh;
    background-color: #F6F9F8;
    .order-tab-bar {
        position: fixed;
        width: 100%;
        padding-top: 10rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        .tab-item {
            width: 25%;
            text-align: center;

            .tab-title {
                position: relative;
                
                .tab-img {
                    width: 36rpx;
                    height: 28rpx;
                    position: absolute;
                    right: 16rpx;
                    top: -10rpx;
                }
                .tab-img-all {
                    right: 28rpx;
                }
            }
            .tab-active {
                font-weight: 700;
                font-size: 28rpx;
                color: #3D3D3D;
            }
        }
    }
    .list-box {
        padding: 24rpx 24rpx 40rpx;
        margin-top: 90rpx;
        background-color: #F6F9F8;
    }
    .list-nodata {
        height: 200rpx;
        line-height: 200rpx;
        text-align: center;
        background-color: #fff;
        border-radius: 32rpx;
    }
}
</style>